<template>
    <view class="page-content" style="background:#F6F6F6;">
        <navbar fixed leftIcon="left" title="验证助记词" shadow></navbar>

		<view class="tips error m-l-28 m-r-28 m-t-30" v-if="selectError">
			助记词顺序不正确，请校对
		</view>
        <view class="tips success c_3c3 fz-16 m-b-11 m-l-28 m-r-28 m-t-50" v-else>
            请按顺序选择您刚才备份在纸上的助记词
        </view>
		
		<view class="h240">
			<view class="box1 bg_e7e w338 flex-wrap view flex-row p-t-12 justify-center" style="border-radius: 19px;margin:0 auto;margin-top:24rpx;">
			    <view style="border-radius:10px;" class="zuji-item w91 h42 m-r-14 m-b-12 view align-center justify-center" v-for="(item,index) in mnemonicList" @click="deleteItem(index)">
			        {{ item }}
			    </view>
			</view>
		</view>
		<view class="rodomWords-wrap-box">
			<view class="rodomWords-wrap box1 bg_e7e w338 flex-wrap view flex-row p-t-12 justify-center" style="border-radius: 19px;margin:0 auto;margin-top:24rpx;">
				<view class="rodomWords-item-wrap flex" v-for="(item, index) in rodomList">
					<view style="border-radius:10px;" class="zuji-item w91 h42 m-r-14 m-b-12 align-center justify-center rodomWords-item" :key="index" @click="deleteRodomItem(index)">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<el-button class="btn-c" 
			@click="confirmClick"
			:disabled="!(mnemonicList.length == wordList.length && !selectError)"
		    :class="{active: mnemonicList.length == wordList.length && !selectError}"
			style="border-radius: 12px !important;" type="primary">确定创建</el-button>
        </view>
		
    </view>
</template>

<script>
import navbar from '@/components/uni-nav-bar'
import uniEasyinput from '@/components/uni-easyinput/uni-easyinput'
import elButton from '@/components/el-button/el-button'
import noData from '@/components/noData/noData'
import sibList from '@/components/sib-list/sib-list.vue'

import { mapState } from 'vuex'
import { randomArraySort } from '@/common/tools.js'
import walletApi from '@/common/walletApi.js'
import {aboutWallet} from "@/common/businessCommon.js"

export default {
	name: 'verifyMnemonicWord',
    components: {
      navbar,
      uniEasyinput
	},
    data() {
        return {
          list: [],
		  
		  type: '',  // ''或者1 来自于钱包创建， 2 来自导出助记词
		  mnemonicList: [],
		  wordList: [],
		  rodomList: [],
		  selectError: false,
		  privateKey: '',
		  publicKey: '',
		  address: ''
        }
    },
	onShow() {
	},
    methods: {
		deleteItem(index) {
				let item = this.mnemonicList.splice(index, 1)
				this.rodomList.push(...item)
				this.selectError = this.compareArrays(this.mnemonicList,this.wordList)
			},
			deleteRodomItem(index) {
				let item = this.rodomList.splice(index, 1)
				this.mnemonicList.push(...item)
				this.selectError = this.compareArrays(this.mnemonicList,this.wordList)
			},
			compareArrays(array1,array2){
				let lens = array1.length;
				let selectError = false;
				for(let i = 0; i < lens; i++){
					if(array1[i] !== array2[i]){
						selectError = true;
						break;
					}
				}
				return selectError
			},
			async addWalletToList(){
		
				uni.showLoading({
					title: '',
					mask: true,
				});
		
			  // 设置密码
				let password = this.password;
				let walletData = {
						mnemonic: this.mnemonicWords,
						name: this.walletName,
				};
				let result = await aboutWallet.addNewWallet(walletData, password);
				uni.hideLoading();
				if(result.status == 1){
					let privateKey = await walletApi.getPrivateKeyFromMnemonicWords(this.mnemonicWords.trim());
					let publicKey = walletApi.getPublicKeyFromPrivateKey(privateKey);
					let address = walletApi.getAddressFromPublicKey(publicKey);
					aboutWallet.setDefaultWallet(address);
					/*createWallet({
						privateKey: privateKey
					}).then(res=>{
						console.log("创建钱包",res,privateKey);
					});*/
					uni.showToast({
						title:"创建成功"
					})
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/home/index"
						})
					}, 1500)
				}else{
					uni.showToast({
						title:"创建失败"
					})
				}
			},
			async confirmClick() {
				if(this.type == 2){
					if(this.rodomList.length > 0 ){
						this.$showToast('请按照正确的顺序验证助记词');
					}else{
						this.$showToast('验证成功');
						this.addWalletToList()
					}
					/*setTimeout(() => {
						uni.switchTab({
							url: "/pages/home/index"
						})
					}, 1500);*/
				}else{
					this.addWalletToList()
				}
		
			}
		},
		computed: {
			...mapState(['mnemonicWords','password','walletName'])
		},
		onLoad(option) {
			this.type = option.type;
			this.wordList = this.mnemonicWords.split(" ")
			console.log('this.wordList', this.wordList);
			this.rodomList = randomArraySort(this.wordList)
		}
    
    
};
</script>

<style lang="scss" scoped>
.bar1-title {
    color:#3C3C3C;
    font-size: 32rpx;
}

page {
    background: #F6F6F6;
}
.left-bar-item {width: 100%;height:68px;display: flex;align-items: center;justify-content: center;}
.left-bar-item .image{
    width:30px;
    height: 30px;
}
.left-bar-item.active {
    background: #F6F6F6;
}
.btn-c {
    display: block;
		margin: 0 auto;
    margin-top:56rpx;
    width: 90%;
	text-align: center;

    height: 96rpx;
    line-height: 78rpx;
    font-size: 40rpx;
}
.box1{min-height: 100rpx;}
.rodomWords-item-wrap, .zuji-item{display: flex;}
.zuji-item {background: #fff;border-radius: 10px;color:#6781FF;}
.fix-bottom {width: 100vw;height: 100px;background: #fff;bottom: 0;left: 0;padding-top:32rpx;position: fixed;}
</style>
